<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>遥测数据实时监控效果</title>
</head>
<body style="height: 700px; margin: 0">
<div id="container" style="height: 100%"></div>

<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript">
  var dom = document.getElementById('container');
  var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  var app = {};

  var data = [];

  //初始化图表数据和横轴范围,数据默认为0
  for (var i = 0; i < 2000; i++) {
    data.push(initData());
  }

  function initData() {
    now = new Date();
    var ds;
    if (now.getSeconds()< 10) {
      ds = "0" + now.getSeconds().toString();
    } else {
      ds = now.getSeconds().toString();
    }
    return {
      name: now.toString(),
      value: [
        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')+ " "+ [now.getHours(), now.getMinutes(), ds].join(':'),
        0
      ]
    };
  }

  //初始化图表
  var option;
  option = {
    title: {
      text: '遥测数据实时监控效果'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        params = params[0];
        var date = new Date(params.name);
        return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' ' + date.getHours() + ':' + date.getMinutes()+ ':' + date.getSeconds() + ' : ' + params.value[1];
      },
      axisPointer: {
        animation: false
      }
    },
    xAxis: {
      type: 'time',
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      max: 2000,
      boundaryGap: [0, '100%'],
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: 'Fake Data',
        type: 'line',
        showSymbol: false,
        data: data
      }
    ]
  };

  //每隔一秒生成随机数值
  setInterval(function () {
      data.shift();
      data.push(randomData());
    myChart.setOption({
      series: [
        {
          data: data
        }
      ]
    });
  }, 1000);



  function randomData() {
    now = new Date();
    value = Math.random() * 2000;
    var ds;
    if (now.getSeconds()< 10) {
      ds = "0" + now.getSeconds().toString();
    } else {
      ds = now.getSeconds().toString();
    }
    var nwoStr = now.Format("yyyy-MM-dd hh:mm:ss");
    return {
      name: now.toString(),
      value: [
        nwoStr,
        Math.round(value)
      ]
    };
  }


  if (option && typeof option === 'object') {
    myChart.setOption(option);
  }

  window.addEventListener('resize', myChart.resize);

  Date.prototype.Format = function (fmt) { // author: meizz
    var o = {
      "M+": this.getMonth() + 1, // 月份
      "d+": this.getDate(), // 日
      "h+": this.getHours(), // 小时
      "m+": this.getMinutes(), // 分
      "s+": this.getSeconds(), // 秒
      "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
      "S": this.getMilliseconds() // 毫秒
    };
    if (/(y+)/.test(fmt))
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
      if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
  }
</script>
</body>
</html>